import React from 'react';
import { Modal, Button, Table, Pagination} from 'antd'
import { LayoutHeader, SearchHeader, ButtonGroup, LayoutBody} from 'component/common'
import  InfoModal  from './infoModal'
import { common } from 'mixin/common'
import { getTable } from 'api/menu'
const { confirm } = Modal;
const { Column } = Table;


class UserCenter extends React.Component{

    constructor(props){
        super(props)
        this.state = {
            searchList:[
                {type:'input',name:'input',label:'输入框'},
                {type:'select',name:'select',label:'选择框',options:[{name:'选项1',value:'1'},{name:'选项2',value:'2'}]},
                {type:'select',name:'selectChange', label:'改变value选择框', 
                    valueProp:'dicKey',
                    nameProp:'dicValue',
                    options:[{dicValue:'选项1',dicKey:'1'},{dicValue:'选项2',dicKey:'2'}]
                },
                {type:'radio',name:'radio',label:'单选框',options:[{name:'选项1',value:'1'},{name:'选项2',value:'2'}]},
            ],
            total:0,
            queryParams:{
                page:1,
                limit:10
            },
            infoVisible:false,
            infoForm:{},
            infoMode:'list',
            dataSource:[]
        }
    }
    //技术胖说不应该在componentWillMount里面发请求，会有问题，但是没告诉我有什么问题。
    componentDidMount() {
        console.log("props",this.props)
        this.getData()
    }
    // 一旦改变state或者prop会做这个组件的重新render，所以应该都封组件，在每个组件里面通过shouldComponentUpdate来做性能优化
    // shouldComponentUpdate(nextProps,nextState){
    //     if(nextState.dataSource !== this.state.dataSource){
    //         return true
    //     }else{
    //         return false
    //     }
    // }
    getData = ()=>{
        getTable().then((res)=>{
            console.log("res",res)
            this.setState({dataSource : res.data.data,total : res.data.total})
        })
        console.log("whiat")
    }
    handlePageChange = (page,pageSize) => {
        console.log("page",page)
        console.log("pageSize",pageSize)
        this.getData()
    }
    handleSizeChange = (current,size) => {
        console.log("current",current)
        console.log("size",size)
        this.getData()
    }
    search = (params)=>{
        console.log("params",params)
    }
    handleNew = ()=>{
        this.setState({ 'infoVisible': true,'infoMode':'create', 'infoForm':{}});
    }
    handleDetail = (record,index)=>{
        console.log("record",record)
        console.log("index",index)
        this.setState({ 'infoForm':record,'infoVisible': true,'infoMode':'see' });
        console.log("refs",this.refs.infoForm)
    }
    handleEdit = (record,index)=>{
        this.setState({ 'infoForm':record,'infoVisible': true,'infoMode':'edit' });
    }
    handleDelete = (record,index)=>{
        confirm({
            title: '删除',
            content: '你确定要删除吗？',
            okText: '确 定',
            okType: 'danger',
            cancelText: '取 消',
            onOk() {
                console.log('OK');
            }
        });
    }
    render(){
        return(
            <div className="userCenter">
                <LayoutHeader>
                    <SearchHeader searchList = {this.state.searchList} searchForm={this.state.queryParams} searchMethod={this.search}></SearchHeader>
                    <ButtonGroup>
                        <Button type="primary" onClick={this.handleNew}>新增</Button>
                        <Button>导出</Button>
                    </ButtonGroup>
                </LayoutHeader>
                <LayoutBody>
                    <Table dataSource={this.state.dataSource} bordered pagination={false}>
                        <Column title="姓名" dataIndex="name" key="name" />
                        <Column title="年龄" key="age" dataIndex="age"/>
                        <Column 
                            title="地址" 
                            key="address" 
                            render={(text, record, index) => (
                                <span>
                                    {this.props.dicName(record.address,'address')}
                                </span>
                            )}/>
                        <Column
                            title="操作"
                            key="action"
                            render={(text, record, index) => (
                                <div className="actionButtonGroup">
                                    <Button size="small" onClick={this.handleDetail.bind(this,record, index)}>查看</Button>
                                    <Button size="small" onClick={this.handleEdit.bind(this,record, index)}>编辑</Button>
                                    <Button size="small" onClick={this.handleDelete.bind(this,record, index)}>删除</Button>
                                </div>
                            )}
                        />
                    </Table>
                    <Pagination 
                        total={this.state.total} 
                        showSizeChanger 
                        showQuickJumper
                        onChange={this.handlePageChange}
                        onShowSizeChange={this.handleSizeChange} 
                        showTotal={()=>`共${this.state.total}条`}>
                    </Pagination>
                </LayoutBody>
                <InfoModal ref="infoForm" visible={this.state.infoVisible} mode={this.state.infoMode} formData={this.state.infoForm}></InfoModal>
            </div>
        )
    }
}

export default common(UserCenter)